import React, { useState, useEffect } from 'react'
import { connect } from 'dva'
import { Col, Form, Input, Button, Card, Select, Table, DatePicker } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { exportBrandReportPDF, fetchSaleDetail, fetchBrandsList, fetchStoresList, exportExcel } from '@/services/dataCenter/financeData'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import RenderButtom from '@/components/RenderButton'
import moment from 'moment'
const {RangePicker} = DatePicker

const BrandSaleDetail = props => {
  const { form, payTypes, platForms, tradeTypes, osTypes, payScenes } = props
  const { getFieldDecorator } = form
  const [dateFormat, setDateFormat] = useState('YYYY-MM-DD')
  const [total, setTotalPage] = useState(null)
  const [brandsList, setBrandsList] = useState([])
  const [param, setParam] = useState({pageNo: 1, pageSize: 99999,})
  const [storesList, setStoresList] = useState([])
  const [saleDetail, setSaleDetail] = useState([])

  useEffect(() => {
    _fetchStoresList()
    init(param)
  }, [])
  const init = async (param) => {
    const r_1 = await fetchSaleDetail({param})
    const r_2 = await fetchBrandsList({param})
    setSaleDetail(r_1.data)
    setBrandsList(r_2.data)
    setTotalPage(r_1.total)
  }
  const _fetchStoresList = async () => {
    let param = {
      // supplierId: form.getFieldValue('supplierId'),
      supplierId: 1072,
      pageSize: 99999
    }
    const res = await fetchStoresList(param)
    setStoresList(res.data)
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 97:
        form.validateFields(async (err, values) => {
          console.log(values)
          exportExcel(values).then(() => {
            console.log(res)
          })
        })
        break;
      default:
        break;
    }
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      init({
        ...param,
        pageNo: page,
      })
    }
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log(dateFormat)
      init({
        ...values,
        startTime: values.selectedTime ? values.selectedTime[0].format(dateFormat) : null,
        endTime: values.selectedTime ? values.selectedTime[1].format(dateFormat) : null,
      })
    })
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '品牌名称',
      dataIndex: 'brandName',
      key: 'brandName',
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
      key: 'orderNo',
    },
    {
      title: '支付方式',
      dataIndex: 'payTypeName',
      key: 'payTypeName',
    },
    {
      title: '支付金额',
      dataIndex: 'payAmount',
      key: 'payAmount',
    },
    {
      title: '交易状态',
      dataIndex: 'payStatusName',
      key: 'payStatusName',
    },
    {
      title: '交易时间',
      dataIndex: 'payTime',
      key: 'payTime',
    },
    {
      title: '支付手续费',
      dataIndex: 'totalDiscountFee',
      key: 'totalDiscountFee',
    },
    {
      title: '品牌扣点',
      dataIndex: 'deductionFee',
      key: 'deductionFee',
    },
    {
      title: '扣点手续费',
      dataIndex: 'discountFee',
      key: 'discountFee',
    },
    {
      title: '应结算',
      dataIndex: 'settlementAmount',
      key: 'settlementAmount',
    },
  ]

  // 查询条件
  const getFields = () => {
    return (<>
      <Col span={8}>
        <Form.Item label="选择门店" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          {getFieldDecorator('storeId', {})
            (<Select>
              {storesList && storesList.map(m => <Select.Option key={m.id} value={m.id}>{m.name}</Select.Option>)}
            </Select>
          )}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="品牌名称" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          {getFieldDecorator('brandName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="选择品牌" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          {getFieldDecorator('brandId', {})
            (<Select>
              {brandsList && brandsList.map(m => <Select.Option key={m.id} value={m.id}>{m.nameCn}</Select.Option>)}
            </Select>
          )}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="商品名称" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          {getFieldDecorator('goodsName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="订单编号" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          {getFieldDecorator('orderNo', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label={`付款时间`} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`selectedTime`, {
            defaultValue: [moment(), moment()],
          })
            (<RangePicker format={dateFormat} />)}
        </Form.Item>
      </Col>
    </>)
  }
  return (<PageHeaderWrapper>
    <Card>
      <Form layout={formLayout}>
        <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      </Form>
    </Card>
    <Card style={{marginTop: '10px'}}>
      <RenderButtom click={handleBtn} />
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={saleDetail}/>
    </Card>
  </PageHeaderWrapper>)
}

export default connect(({global}) => ({
  platForms: global.platForms,
  payTypes: global.payTypes,
  platForms: global.platForms,
  tradeTypes: global.tradeTypes,
  osTypes: global.osTypes,
  payScenes: global.payScenes,
}))(Form.create()(BrandSaleDetail))
